<template>
  <div class="title">
    <div class="container_table">
      <el-table
        :data="tableData.slice((currentPage-1)*pagesize,currentPage*pagesize)"
        stripe
        style="width: 100%；height:100%;"
        :default-sort = "{prop: 'date', order: 'descending'}">
          <el-table-column
            label=" "
            min-width>
            <template slot-scope="scope">
              <img :src="scope.row.clothImg" id="clothImg">
            </template>
          </el-table-column>
          <el-table-column
            label=" "
            min-width>
            <template slot-scope="scope">
              <img :src="scope.row.clothImg2" id="clothImg">
            </template>
          </el-table-column>
          <el-table-column
            label=" "
            min-width>
            <template slot-scope="scope" id="clothImg-fa">
              <img :src="scope.row.clothImg3" id="clothImg">
            </template>
          </el-table-column>
        </el-table>
      <transition>
        <el-pagination class="fy"
            layout="prev, pager, next"
            @current-change="current_change"
            :total="total"
            :page-size="pagesize"
            background
          >
        </el-pagination>
      </transition>
    </div>
  </div>
</template>
<script>
export default {
  name: 'list11',
  data () {
    return {
      total: 1000, // 默认数据总数
      pagesize: 3, // 每页的数据条数
      currentPage: 1, // 默认开始页面
      tableData: [
        {
          id: 1,
          clothImg: require('@/assets/images/Main/Ward/cloth.jpg'),
          clothImg2: require('@/assets/images/Main/Ward/cloth.jpg'),
          clothImg3: require('@/assets/images/Main/Ward/cloth.jpg')
        },
        {
          id: 2,
          clothImg: require('@/assets/images/Main/Ward/cloth.jpg'),
          clothImg2: require('@/assets/images/Main/Ward/cloth.jpg'),
          clothImg3: require('@/assets/images/Main/Ward/cloth.jpg')
        },
        {
          id: 3,
          clothImg: require('@/assets/images/Main/Ward/cloth.jpg'),
          clothImg2: require('@/assets/images/Main/Ward/cloth.jpg'),
          clothImg3: require('@/assets/images/Main/Ward/cloth.jpg')
        },
        {
          id: 4,
          clothImg: require('@/assets/images/Main/Ward/cloth.jpg'),
          clothImg2: require('@/assets/images/Main/Ward/cloth.jpg'),
          clothImg3: require('@/assets/images/Main/Ward/cloth.jpg')
        },
        {
          id: 5,
          clothImg: require('@/assets/images/Main/Ward/cloth.jpg'),
          clothImg2: require('@/assets/images/Main/Ward/cloth.jpg'),
          clothImg3: require('@/assets/images/Main/Ward/cloth.jpg')
        },
        {
          id: 6,
          clothImg: require('@/assets/images/Main/Ward/cloth.jpg'),
          clothImg2: require('@/assets/images/Main/Ward/cloth.jpg'),
          clothImg3: require('@/assets/images/Main/Ward/cloth.jpg')
        },
        {
          id: 7,
          clothImg: require('@/assets/images/Main/Ward/cloth.jpg'),
          clothImg2: require('@/assets/images/Main/Ward/cloth.jpg'),
          clothImg3: require('@/assets/images/Main/Ward/cloth.jpg')
        },
        {
          id: 8,
          clothImg: require('@/assets/images/Main/Ward/cloth.jpg'),
          clothImg2: require('@/assets/images/Main/Ward/need.png'),
          clothImg3: require('@/assets/images/Main/Ward/need.png')
        },
        {
          id: 9,
          clothImg: require('@/assets/images/Main/Ward/need.png'),
          clothImg2: require('@/assets/images/Main/Ward/need.png'),
          clothImg3: require('@/assets/images/Main/Ward/need.png')
        }
      ]
    }
  },
  methods: {
    tableRowClassName ({ row, rowIndex }) {
      if (rowIndex === 0) {
        return 'th'
      } else {
        return ''
      }
    },
    switchChange () {
      this.istag = !this.istag
    },
    current_change (currentPage) {
      this.currentPage = currentPage
    }
  },
  created: function () {
    this.total = this.tableData.length
  }
}
</script>
<style>
  .fl{
      float: right;
      margin-right:20px;
  }
  .fy{
    /* position: absolute;
    bottom: 150px;
    left: 5ch; */
    text-align:center;
    margin-top:30px;
    height: 100px;
  }
  /* .title{
      height:100%;
  } */
  #clothImg {
    width: 100%;
    height: auto;
  }
  .clothImg-fa {
    position: relative;
    width: 50%;
    height: 0;
    padding-bottom: 50%;
  }
</style>
